<template>
  <view class="basic-swiper">
    <!-- indicator-dots autoplay
      circular-->
    <swiper class="swiper"
      
      
      @change="changeSwiper">
      <swiper-item class="swiper-item" v-for="item in props.list" :key="item.id">
        <image
          :src="item.imgUrl"
          mode="scaleToFill"
        />
      </swiper-item>
    
    </swiper>

    <!-- 自定义指示点 -->
     <view class="indicator">
      <text class="dot" v-for="(item,index) in props.list" :key="item.id"
      :class="{active: index === activeIndex}">

      </text>
     </view>
  </view>
</template>

<script setup lang="ts">
import {ref, type PropType} from 'vue'
import type { BannerItem } from '@/types/home';
// const props = defineProps({
//   list:{
//     // type: Array as PropType<BannerItem[]>,
//     // type:BannerItem[], // 这样不行的。
//     type:Array<BannerItem>, // 泛型。
//     default(){
//       return []
//     }
//   }
// })

const props = defineProps<{
  list:BannerItem[]
}>()
console.log('banner组件执行了吗:',props); // 但是这里面一层层找，是可以找到有值的list的。
console.log('props:',props.list); // 空数组
setTimeout(()=>{
  console.log('props2:',props.list); // 接口返回的值[{},{}]
},1000)

// 当前索引
let activeIndex = ref(0)

const changeSwiper:UniHelper.SwiperOnChange = (ev)=>{
  console.log('事件对象：',ev); // ev.detail.current就是当前的索引。
  console.log('事件对象：',ev.detail?.current); 
  // activeIndex.value = ev.detail?.current
  activeIndex.value = ev.detail!.current // 非空断言。
  
}
</script>

<style lang="scss" scoped>
.basic-swiper{
  position: relative;
  .swiper{
    height: 300rpx;
  
    .swiper-item{
      display: block;
      height: 300rpx;
      line-height: 300rpx;
      // text-align: center;
      image{
        width: 100%;
        height: 100%;
      }
    }
  
 
  }
  .indicator{
    position: absolute;
    bottom: 16px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;

    .dot{
      width: 30rpx;
      height: 6rpx;
      margin: 0 8rpx;
      border-radius: 6rpx;
      background-color: rgba(255, 255, 255, 0.4);

      &.active {
        background: #fff;
      }
    }
  }
}

</style>
